<script setup lang="ts">
  import pdf from '@/assets/image/pdf.png'
  import video from '@/assets/image/pages/order/new/video.png'
  import { ref, PropType, computed } from 'vue'
  import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
  import { useGetFinishOrderInfo, ArrowClickParam } from './useGetFinishInfo'

  const { finishOrderInfos, getOrderFinishInfoLoading, getOrderFinishInfo } =
    useGetFinishOrderInfo()

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })

  /**
   * 这个集合的作用是为了存储所有的文件列表容器，这个是一维数组，不能直接使用
   * 还需要拆分成可使用的结构
   */
  const filesRefs = ref<HTMLDivElement[] | null>(null)

  /**
   * 可直接使用的文件列表容器集合
   */
  const operateFilesRefs = ref<Array<Array<HTMLDivElement>>>([])

  // 条码图片div
  const serialNumberUrlDiv = ref<HTMLDivElement | null>(null)

  // 整体图片div
  const entireImgUrlDiv = ref<HTMLDivElement | null>(null)

  // 故障图片div
  const faultImgUrlDiv = ref<HTMLDivElement | null>(null)

  // 第三方信息图片列表
  const thirdImgs = computed(() => {
    const { serialNumberUrl, entireImgUrl, faultImgUrl } = props.orderDetail.thirdStateFinishContent
    return {
      serialNumberUrl: serialNumberUrl || [],
      entireImgUrl: entireImgUrl || [],
      faultImgUrl: faultImgUrl || [],
    }
  })

  /**
   * 这个集合是存储左右箭头的激活状态
   */
  const arrowStates = ref<Array<Array<'left' | 'right'>>>([])
  const handleFilesArrowClick = (param: ArrowClickParam) => {
    if (filesRefs.value && filesRefs.value.length > 0) {
      if (param.direction === 'right') {
        arrowStates.value[param.infoIndex][param.fieldIndex] = 'left'
        operateFilesRefs.value[param.infoIndex][
          param.fieldIndex
        ].style.transform = `translateX(-100%)`
      } else {
        arrowStates.value[param.infoIndex][param.fieldIndex] = 'right'
        operateFilesRefs.value[param.infoIndex][param.fieldIndex].style.transform = `translateX(0)`
      }
    }
  }

  /**
   * 第三方结单信息的图片左右箭头激活状态
   */
  const thirdEndInfoImgArrowStates = ref({
    serialNumberUrl: 'left',
    entireImgUrl: 'left',
    faultImgUrl: 'left',
  })

  /**
   * 第三方图片切换箭头点击事件
   * @param {'left'|'right'} direction - 方向
   * @param {string} key - 第三方结单信息的图片左右箭头激活状态的键
   */
  const handleThirdImgArrowClick = (direction: 'left' | 'right', key: string) => {
    if (filesRefs.value && filesRefs.value.length > 0) {
      if (direction === 'right') {
        thirdEndInfoImgArrowStates.value[key] = 'left'
        if (key === 'serialNumberUrl' && serialNumberUrlDiv.value) {
          serialNumberUrlDiv.value.style.transform = `translateX(-100%)`
        }
        if (key === 'entireImgUrl' && entireImgUrlDiv.value) {
          entireImgUrlDiv.value.style.transform = `translateX(-100%)`
        }
        if (key === 'faultImgUrl' && faultImgUrlDiv.value) {
          faultImgUrlDiv.value.style.transform = `translateX(-100%)`
        }
      } else {
        thirdEndInfoImgArrowStates.value[key] = 'right'
        if (key === 'serialNumberUrl' && serialNumberUrlDiv.value) {
          serialNumberUrlDiv.value.style.transform = `translateX(0)`
        }
        if (key === 'entireImgUrl' && entireImgUrlDiv.value) {
          entireImgUrlDiv.value.style.transform = `translateX(0)`
        }
        if (key === 'faultImgUrl' && faultImgUrlDiv.value) {
          faultImgUrlDiv.value.style.transform = `translateX(0)`
        }
      }
    }
  }

  const pdfDialogVisible = ref(false)
  const pdfPreviews = ref<Array<string>>([])
  const pdfPreviewDialogTitle = ref('附件')
  const currentPreviewPdfIndex = ref(0)
  const handlePreviewPdf = (infoIndex: number, fieldIndex: number, fileIndex: number) => {
    currentPreviewPdfIndex.value = fileIndex
    pdfPreviews.value = finishOrderInfos.value[infoIndex].customFieldFile[fieldIndex].val
    pdfPreviewDialogTitle.value = finishOrderInfos.value[infoIndex].customFieldFile[fieldIndex].name
    pdfDialogVisible.value = true
  }
  const onClosePdfPreviewDialog = () => {
    currentPreviewPdfIndex.value = 0
    pdfPreviews.value = []
    pdfPreviewDialogTitle.value = '附件'
    pdfDialogVisible.value = false
  }

  const videoDialogVisible = ref(false)
  const videoPreviews = ref<Array<string>>([])
  const videoPreviewDialogTitle = ref('视频')
  const currentPreviewVideoIndex = ref(0)
  const handlePreviewVideo = (infoIndex: number, fieldIndex: number, fileIndex: number) => {
    currentPreviewVideoIndex.value = fileIndex
    videoPreviews.value = finishOrderInfos.value[infoIndex].customFieldFile[fieldIndex].val
    videoPreviewDialogTitle.value =
      finishOrderInfos.value[infoIndex].customFieldFile[fieldIndex].name
    videoDialogVisible.value = true
  }
  const onCloseVideoPreviewDialog = () => {
    currentPreviewVideoIndex.value = 0
    videoPreviews.value = []
    videoPreviewDialogTitle.value = '附件'
    videoDialogVisible.value = false
  }

  defineExpose({
    getOrderFinishInfo: (id: string) => {
      getOrderFinishInfo(id).then(() => {
        operateFilesRefs.value = []
        finishOrderInfos.value.forEach((info) => {
          arrowStates.value.push(info.customFieldFile.map(() => 'right'))
        })

        /**
         * 将文件列表容器拆分成可使用的结构，并存储在新的集合里
         */
        if (filesRefs.value && filesRefs.value.length > 0) {
          for (let i = 0; i < finishOrderInfos.value.length; ++i) {
            operateFilesRefs.value.push(
              filesRefs.value.slice(0, finishOrderInfos.value[i].customFieldFile.length),
            )
            filesRefs.value.splice(0, finishOrderInfos.value[i].customFieldFile.length)
          }
        }
      })
    },
    getOrderFinishInfoLoading,
  })
</script>

<template>
  <div
    v-if="finishOrderInfos.length > 0 || props.orderDetail.thirdStateFinishContent"
    class="finish_order_info"
  >
    <div class="title">结单信息</div>
    <div class="info_list">
      <div v-for="(info, infoIndex) in finishOrderInfos" :key="infoIndex" class="info_container">
        <div class="title">
          <div class="line"></div>
          <span>{{ info.title }}</span>
        </div>
        <div class="content">
          <div class="txt">
            <div v-for="field in info.customFieldTxt" :key="field.id" class="info_item">
              <div class="label">
                <h-tooltip-text
                  :max-width="52"
                  :height="16"
                  :text="field.name || ''"
                  text-align="right"
                />
                <div class="middle">:</div>
              </div>
              <h-tooltip-text
                :max-width="160"
                :height="16"
                :text="field.val || ''"
                text-align="left"
              />
            </div>
            <div v-for="field in info.customFieldRate" :key="field.id" class="info_item">
              <div class="label">
                <h-tooltip-text
                  :max-width="52"
                  :height="16"
                  :text="field.name || ''"
                  text-align="right"
                />
                <div class="middle">:</div>
              </div>
              <div class="value">
                <div class="rate_container">
                  <el-rate style="height: 16px" disabled :model-value="field.val / 2" allow-half />
                  <span>{{ field.val }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="file">
            <div
              v-for="(field, fieldIndex) in info.customFieldFile"
              :key="field.id"
              class="info_item"
            >
              <div class="label">
                <h-tooltip-text
                  :max-width="52"
                  :height="16"
                  :text="field.name || ''"
                  text-align="right"
                />
                <div class="middle">:</div>
              </div>

              <div class="file_list">
                <div
                  v-if="field.val.length >= 6 && arrowStates.length > 0"
                  :class="[
                    'arrow',
                    arrowStates[infoIndex][fieldIndex] === 'left'
                      ? 'enabled_arrow'
                      : 'disabled_arrow',
                  ]"
                  @click="handleFilesArrowClick({ infoIndex, fieldIndex, direction: 'left' })"
                >
                  <i class="iconfont icon-arrow-left"></i>
                </div>
                <div class="list">
                  <div ref="filesRefs" class="list_content">
                    <div v-for="(file, fileIndex) in field.val" :key="fileIndex" class="file">
                      <HImage
                        v-show="field.type === 5 && file"
                        :src="file"
                        :width="80"
                        :height="50"
                        :padding="2"
                        fit="contain"
                        :show-del-btn="false"
                        :preview-src-list="field.val"
                        :initial-index="fileIndex"
                      />
                      <HImage
                        v-show="field.type === 6 && file"
                        :src="pdf"
                        :width="80"
                        :height="50"
                        fit="contain"
                        :is-show-img-preview="false"
                        :show-del-btn="false"
                        @preview="handlePreviewPdf(infoIndex, fieldIndex, fileIndex)"
                      />
                      <HImage
                        v-show="field.type === 7 && file"
                        :src="video"
                        :width="80"
                        :height="50"
                        fit="contain"
                        :is-show-img-preview="false"
                        :show-del-btn="false"
                        @preview="handlePreviewVideo(infoIndex, fieldIndex, fileIndex)"
                      />
                    </div>
                  </div>
                </div>
                <div
                  v-if="field.val.length >= 6 && arrowStates.length > 0"
                  :class="[
                    'arrow',
                    arrowStates[infoIndex][fieldIndex] === 'right'
                      ? 'enabled_arrow'
                      : 'disabled_arrow',
                  ]"
                  @click="handleFilesArrowClick({ infoIndex, fieldIndex, direction: 'right' })"
                >
                  <i class="iconfont icon-arrow-right"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="props.orderDetail.thirdStateFinishContent" class="info_container">
        <div class="title">
          <div class="line"></div>
          <span>第三方完工信息</span>
        </div>
        <div class="content">
          <div class="txt">
            <div class="info_item">
              <div class="label">
                维修描述
                <div class="middle">:</div>
              </div>
              <h-tooltip-text
                :max-width="160"
                :height="16"
                :text="props.orderDetail.thirdStateFinishContent.content || ''"
                text-align="left"
              />
            </div>
          </div>
          <div class="file">
            <div v-for="item in ['entireImgUrl']" :key="item" class="info_item">
              <div class="label">
                <template v-if="item === 'serialNumberUrl'">条码图</template>
                <template v-if="item === 'entireImgUrl'">整体图片</template>
                <template v-if="item === 'faultImgUrl'">故障图片</template>
                <div class="middle">:</div>
              </div>
              <div class="file_list">
                <div
                  v-if="thirdImgs[item].length >= 6 && arrowStates.length > 0"
                  :class="[
                    'arrow',
                    thirdEndInfoImgArrowStates[item] === 'left'
                      ? 'enabled_arrow'
                      : 'disabled_arrow',
                  ]"
                  @click="handleThirdImgArrowClick('left', item)"
                >
                  <i class="iconfont icon-arrow-left"></i>
                </div>
                <div class="list">
                  <div :ref="`${item}Div`" class="list_content">
                    <div v-for="(img, imgIndex) in thirdImgs[item]" :key="imgIndex" class="file">
                      <h-image
                        v-if="img"
                        :src="img"
                        :width="80"
                        :show-del-btn="false"
                        :height="50"
                        :padding="2"
                      />
                    </div>
                  </div>
                </div>
                <div
                  v-if="thirdImgs[item].length >= 6 && arrowStates.length > 0"
                  :class="[
                    'arrow',
                    thirdEndInfoImgArrowStates[item] === 'right'
                      ? 'enabled_arrow'
                      : 'disabled_arrow',
                  ]"
                  @click="handleThirdImgArrowClick('right', item)"
                >
                  <i class="iconfont icon-arrow-right"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--附件预览弹窗-->
  <HDialog
    v-model="pdfDialogVisible"
    :title="pdfPreviewDialogTitle"
    :width="800"
    @close="onClosePdfPreviewDialog"
  >
    <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
      <el-button
        type="primary"
        :disabled="currentPreviewPdfIndex === 0"
        :icon="ArrowLeftBold"
        style="padding: 0 14px"
        @click="currentPreviewPdfIndex--"
      />
      <iframe :src="pdfPreviews[currentPreviewPdfIndex]" width="600" height="500"></iframe>
      <el-button
        type="primary"
        :disabled="currentPreviewPdfIndex === pdfPreviews.length - 1"
        :icon="ArrowRightBold"
        style="padding: 0 14px"
        @click="currentPreviewPdfIndex++"
      />
    </div>
  </HDialog>

  <!--视频预览弹窗-->
  <HDialog
    v-model="videoDialogVisible"
    :title="videoPreviewDialogTitle"
    :width="800"
    @close="onCloseVideoPreviewDialog"
  >
    <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
      <el-button
        type="primary"
        :disabled="currentPreviewVideoIndex === 0"
        :icon="ArrowLeftBold"
        style="padding: 0 14px"
        @click="currentPreviewVideoIndex--"
      />
      <video :src="videoPreviews[currentPreviewVideoIndex]" controls width="600"></video>
      <el-button
        type="primary"
        :disabled="currentPreviewVideoIndex === videoPreviews.length - 1"
        :icon="ArrowRightBold"
        style="padding: 0 14px"
        @click="currentPreviewVideoIndex++"
      />
    </div>
  </HDialog>
</template>

<style scoped lang="scss">
  .finish_order_info {
    background-color: #fff;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .title {
      color: #000;
      font-size: 14px;
      font-weight: bold;
    }

    .info_list {
      display: flex;
      flex-wrap: wrap;
      column-gap: 86px;
      row-gap: 12px;
      padding: 0 16px;

      .info_container {
        display: flex;
        flex-direction: column;
        width: 538px;

        .title {
          display: flex;
          align-items: center;
          column-gap: 5px;
          border-bottom: 1px solid rgb(240, 240, 240);
          padding: 0 0 4px 0;

          .line {
            width: 2px;
            height: 14px;
            border-radius: 2px;
            background-color: $primaryColor;
          }

          span {
            font-weight: bold;
            font-size: 14px;
          }
        }

        .content {
          padding: 12px 0 0 0;
          display: flex;
          flex-direction: column;
          row-gap: 12px;

          .txt {
            display: flex;
            flex-wrap: wrap;
            column-gap: 86px;
            row-gap: 12px;

            .info_item {
              display: flex;
              gap: 5px;

              .label {
                color: #606266;
                display: flex;
                height: 18px;
                line-height: 18px;

                .text {
                  width: 52px;
                  text-align: right;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  cursor: pointer;
                }

                .middle {
                  width: 3px;
                }
              }

              .value {
                width: 160px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
                height: 18px;
                line-height: 18px;

                .rate_container {
                  display: flex;
                  align-items: center;
                }
              }
            }
          }

          .file {
            display: flex;
            flex-wrap: wrap;
            column-gap: 76px;
            row-gap: 12px;

            .info_item {
              display: flex;
              gap: 5px;

              .label {
                color: #606266;
                display: flex;
                height: 18px;
                line-height: 18px;

                .text {
                  width: 52px;
                  text-align: right;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  cursor: pointer;
                }

                .middle {
                  width: 3px;
                }
              }

              .file_list {
                max-width: 478px;
                display: flex;
                gap: 5px;

                .arrow {
                  min-width: 24px;
                  height: 50px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  box-sizing: border-box;
                  transition: all 0.4s ease;
                }

                .enabled_arrow {
                  cursor: pointer;
                  border: 1px solid #ebeef5;
                  transition: all 0.4s;

                  .iconfont {
                    color: $primaryColor;
                    transition: all 0.4s;
                  }

                  &:hover {
                    border-color: $primaryColor;
                    background-color: $primaryColor;

                    .iconfont {
                      color: #fff;
                    }
                  }
                }

                .disabled_arrow {
                  cursor: not-allowed;
                  border: 1px solid #ebeef5;

                  .iconfont {
                    color: #ebeef5;
                  }
                }

                .list {
                  width: 420px;
                  overflow: hidden;

                  .list_content {
                    display: flex;
                    gap: 5px;
                    transition: all 0.4s ease;

                    .file {
                      width: 80px;
                      height: 50px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
